<template>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <!-- Logo -->
      <a class="navbar-brand" href="#">
        <img
          src="../assets/images/logo-@4x.png"
          alt="Logo"
          width="120"
          height="48"
        />
      </a>
      <!-- 导航折叠按钮 -->
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 中间导航 -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-collapse justify-content-center">
          <ul class="navbar-nav">
            <!-- 二级菜单 -->
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Product
              </a>
              <!--二级导航菜单内容-->
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Solutions
              </a>
              <!--二级-->
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Resources
              </a>
              <!--二级-->
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
            <!-- 一级菜单 -->
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Docs</a>
            </li>
          </ul>
        </div>
        <!-- 导航右侧按钮 -->
        <div class="d-lg-flex nav-button">
          <button class="btn btn-outline-success me-2" type="button">
            Book a demo
          </button>
          <button class="btn btn-outline-success" type="button">
            Sign in <span class="iconfont icon-youjiantou"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: "HomeNav",
};
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
.navbar {
  padding: 0 40px;
  min-height: 96px;
  .dropdown,
  .nav-item {
    align-items: center;
    margin-left: 12px;
    margin-right: 12px;
    padding: 12px;
    transition: box-shadow 0.3s, transform 0.3s;
    display: flex;
    .dropdown-toggle::after {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-left: 8px;
      vertical-align: 2px;
      border-left: #f5f5f7 solid 2.5px;
      border-bottom: #f5f5f7 solid 2.5px;
      transform: rotate(-45deg);
      border-top: none;
      border-right: none;
    }
    .nav-link {
      color: #f5f5f7;
      border-bottom: 3px solid transparent;
    }
    .nav-link:hover {
      border-bottom: 3px solid #00ffce;
    }
  }
  .nav-button {
    width: auto;
    height: auto;
    .btn-outline-success {
      box-sizing: border-box;
      padding: 13px 16px;
      border-radius: 4px;
      font-weight: 700;
      line-height: 1;
      --bs-btn-border-color: #f5f5f7;
      --bs-btn-hover-border-color: #f5f5f7;
      --bs-btn-focus-shadow-rgb: 25, 135, 84;
      --bs-btn-active-color: #fff;
      --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
      --bs-btn-disabled-bg: transparent;
      --bs-gradient: none;
    }
    .btn-outline-success:first-child {
      --bs-btn-color: #f5f5f7;
      --bs-btn-hover-color: #f5f5f7;
      --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    }
    .btn-outline-success:last-child {
      background-color: #fff;
      --bs-btn-hover-color: #111827;
      --bs-btn-color: #111827;
    }
    .btn-outline-success:last-child:hover {
      background-color: rgba(255, 255, 255, 0.8);
    }
    .icon-youjiantou {
      vertical-align: middle;
      font-size: 21px;
    }
  }
}
</style>
